<template>
  <div style="padding: 20px">
    <div class="headerBoxList">
    <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 42H44" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><rect x="8" y="22" width="12" height="20" rx="2" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/><rect x="20" y="4" width="20" height="38" rx="2" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/><path d="M28 32.0083H32" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 32.0083H16" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M28 23.0083H32" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M28 14.0083H32" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
      <span style="margin-left: 10px"
        >常驻城市
      </span>
      <el-button
        style="margin-left: auto;"
        type="primary"
        size="mini"
        @click="printJson"
      >
        打印 JSON
      </el-button>
    </div>
    <div class="content">
    <el-table
      :data="list"
      style="width: 100%">
      <el-table-column
        prop="content"
        label="内容"
        >
        <template slot-scope="scope">
            <div>地点：{{scope.row.county_name}} {{scope.row.province_name}}  {{scope.row.city_name}}</div>
            <div>城市代码：{{scope.row.city_code}}</div>
            <div>经纬度：{{scope.row.ca+'，'+scope.row.co}}</div>
            <div>时区：{{scope.row.time_zone}}</div>
            <div>插入时间 ：{{formateDate(scope.row.insert_time)}}</div>
        </template>
      </el-table-column>
    </el-table>
      <div class="block">
    <el-pagination
      :small='true'
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="offset"
      :page-sizes="[20, 50, 100, 200]"
      :page-size="limit"
      layout="total, prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
    </div>
  </div>
</template>
  
  <script>
  import { getHuaWeiWeatherInfoApi } from "@/api/phoneInfo/index"
  import { parseTime } from '@/utils/index'
export default {
  props:['sendData'],
  name: "residentCity",
  data() {
    return {
      list: [],
      offset:1,
      limit:1000,
      total: 0,
    };
  },
  mounted() {
    this.init();
  },
  watch: {
    "$store.state.account.huawei": function () {
      this.tableData = [];
    this.init()
    },
  },
  methods: {
    printJson() {
  if (!this.list || this.list.length === 0) {
    this.$message.warning("暂无数据可打印");
    return;
  }

  const data = this.list.map(item => ({
    地点: `${item.county_name || ''} ${item.province_name || ''} ${item.city_name || ''}`,
    城市代码: item.city_code || "",
    经纬度: `${item.ca || ''}，${item.co || ''}`,
    时区: item.time_zone || "",
    插入时间: this.formateDate(item.insert_time) || "",
  }));

  printJS({
    printable: data,
    type: "json",
    properties: ["地点", "城市代码", "经纬度", "时区", "插入时间"],
    header: "常驻城市",
    style: `
      table { border-collapse: collapse; width: 100%; font-size: 14px; }
      table td, table th { border: 1px solid #ccc; padding: 8px; word-break: break-all; }
      table th { background: #f6f6f6; font-weight: 600; }
      table tr:nth-child(even){ background:#fafafa; }
    `,
  });
},

    formateDate(date){
        return  parseTime(date)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.limit = val;
      this.init()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.offset = val;
      this.init()
    },
    init() {
        let data = {
            proof_num : this.sendData.proof_num,
            weatherType:'cityinfo',
            offset:this.offset,
            limit:this.limit
        }
        getHuaWeiWeatherInfoApi(data).then(res=>{
            this.list = res.data;
            if(res.data.length ==0)this.total = 0
            this.total = res.data[0].cnt
        }).catch(error=>{

        })
    },
  },
};
</script>
  
  <style scoped>
.headerBoxList {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #d2d2d2;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}
.content {
  height: 80vh;
  overflow-y: auto;
  /* padding-left: 50px; */
  margin-top: 20px;
}
@media screen and (min-width: 2360px) {
  .content {
    height: 67vh;
    overflow-y: auto;
  }
}
</style>